<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:36
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>

<script>
// 引入g2plot
// 对象的解构
import { Column } from "@antv/g2plot";
import { ref, onMounted } from "vue";
export default {
  setup() {
    // 获取到容器
    const root = ref(null);
    // 将实例化对象的函数封装起来
    let initChart = () => {
      const data = [
        { city: "四月", type: "房地产服务中心", value: 14500 },
        { city: "四月", type: "区政务中心", value: 10000 },
        { city: "六月", type: "房地产服务中心", value: 13500 },
         { city: "六月", type: "区政务中心", value: 8500 },
         { city: "八月", type: "房地产服务中心", value: 3500 },
         { city: "八月", type: "区政务中心", value: 6500},
         { city: "十月", type: "房地产服务中心", value: 9360 },
         { city: "十月", type: "区政务中心", value: 5200},
        
      ]
      // 实例化一个Colunm对象
      const column = new Column(root.value, {
        data,
        xField: "city",
        yField: "value",
        seriesField: "type",
        isGroup: "true",
        columnStyle: {
          radius: [20, 20, 0, 0],
        },
      });
      // 渲染
      column.render();
    };
    onMounted(initChart);
    return {
      root,
    };
  },
};
</script>